<template>
  <div class="top">
    <div class="left">
      <span class="lbtn" @click="goHome">首页</span>
    </div>
    <div class="center">
      <div class="title">智慧旅游可视化大数据平台</div>
    </div>
    <div class="right">
      <span class="rbtn">统计报告</span>
      <span class="time">当前时间:{{time}}</span>

    </div>

  </div>
</template>

<script setup lang="ts">
import { ref,onMounted,onBeforeMount} from "vue";
import moment from "moment"
// 点击首页按钮回到首页
import {useRouter} from "vue-router"
// 获取路由器对象
let $router = useRouter()
// 存储当前时间
let time =ref(moment().format("YYYY年MM月DD日 hh:mm:ss"))
// 定时器的id
let timer = ref<number>(0)
// 按钮的点击回调
const goHome= ()=>(
  $router.push("./home")
)
// 组件挂在完毕更新当前的事件
onMounted(()=>(
    timer.value = setInterval(()=>{
      time.value =moment().format("YYYY年MM月DD日 hh:mm:ss")
    },1000)
))
// 组件销毁前清除定时器
onBeforeMount(()=>{
    clearInterval(timer.value)
})
</script>

<style lang="scss" scoped>
.top{
    width: 100%;
    height: 40px;
    display: flex;
    .left{
        flex: 1;  
        background: url(../../images/dataScreen-header-left-bg.png) no-repeat;
        background-size: cover;
        .lbtn{
          width: 150px;
          height: 40px;
          float: right;
          background:url(../../images/dataScreen-header-btn-bg-l.png);
          background-size: cover;
          text-align: center;
          line-height:40px;
          color: #29fcff;
          font-size: 20px;
          cursor:pointer;
        }
    }
    .right{
        flex: 1;
        background:url(../../images/dataScreen-header-left-bg.png) no-repeat;
        background-size: cover;
        display: flex;
        justify-content:space-between;
        align-items: center;
        .rbtn{
          width: 150px;
          height:40px;
          background: url(../../images/dataScreen-header-btn-bg-r.png) no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 40px;
          color: #29fcff;
        }
        .time{
          color: #29fcff;
          margin-right: 10px;
          font-size: 16px;
        }
    }
    .center{ 
      flex:2; 
      .title{
        width:100%;
        height: 74px;
        background: url(../../images/dataScreen-header-center-bg.png) no-repeat;
        background-size:cover;
        text-align: center;
        line-height: 74px;
        color: #29fcff;
        font-size: 30px;

      }
    }
}
</style>
